import React, { Component } from 'react';
import { Card, Form, Icon, Input, Button, Radio, Select, Switch, DatePicker, Upload } from 'antd';
const Option = Select.Option;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const TextArea = Input.TextArea;


class Register extends Component {
    state = {
        confirmDirty: false,    //confirmDirty为false是为了过滤掉第一次填写password时，导致confim就出现验证的问题
        children: []
    };
    //提交表单
    handleSubmit = (e) => {
        e.preventDefault();
        const form = this.props.form;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
        console.log(this.state.children)

    }
    //再次填写密码input时验证，第一次进行双方数据验证
    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码不一样请重新填写');
        } else {
            callback();
        }
    }
    //当密码input被修改时，第二次进行双发数据验证
    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });    //判断再次填写密码input为非空
    }
    handleChange = (value) => {
        let children = []
        children.push(value)
        this.setState({
            children: children
        })
    }
    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    handleChangeImg = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
            },
        };
        const offsetLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 12,
                    offset: 4
                },
            },
        }
        const children = [];
        for (let i = 10; i < 36; i++) {
            children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
        }
        return (
            <div className="card-wrap">
                <Card title="新用户注册表单">
                    <Form layout="horizontal">
                        <FormItem
                            {...formItemLayout}
                            label="用户名："
                        >
                            {
                                getFieldDecorator('userName', {
                                    rules: [{ required: true, message: '请填写用户名！' }]
                                })(
                                    <Input prefix={<Icon type="user" />} placeholder="用户名" />
                                    )
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="密码"
                        >
                            {getFieldDecorator('password', {
                                rules: [{
                                    required: true, message: '请填写你的密码!',
                                }, {
                                    validator: this.validateToNextPassword,
                                }],
                            })(
                                <Input prefix={<Icon type="lock" />} type="password" placeholder="密码" />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="请确认密码"
                        >
                            {getFieldDecorator('confirm', {
                                rules: [{
                                    required: true, message: '请再次填写你的密码!',
                                }, {
                                    validator: this.compareToFirstPassword,
                                }],
                            })(
                                <Input prefix={<Icon type="lock" />} type="password" onBlur={this.handleConfirmBlur} placeholder="密码" />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="性别"
                        >
                            {getFieldDecorator('sex', {
                                initialValue: '1'
                            })(
                                <RadioGroup>
                                    <Radio value={'1'}>男</Radio>
                                    <Radio value={'0'}>女</Radio>
                                </RadioGroup>
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="年龄"
                        >
                            {getFieldDecorator('age', {
                            })(
                                <Input placeholder="永远18岁" />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="当前状态"
                        >
                            {getFieldDecorator('state', {
                                initialValue: '1'
                            })(
                                <Select>
                                    <Option value="1">菜鸡</Option>
                                    <Option value="2">大神</Option>
                                    <Option value="3">2B</Option>
                                    <Option value="4">上帝</Option>
                                </Select>
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="爱好"
                        >
                            {getFieldDecorator('interest', {
                            })(
                                <Select
                                    mode="tags"
                                    style={{ width: '100%' }}
                                    placeholder="混吃等死"
                                    onChange={this.handleChange}
                                >
                                    {children}
                                </Select>,
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="婚否"
                        >
                            {getFieldDecorator('isMarried', {
                                valuePropName: 'checked',
                                initialValue: false
                            })(
                                <Switch />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="生日"
                        >
                            {getFieldDecorator('date-picker', {
                                rules: [{ type: 'object', required: true, message: 'Please select time!' }],
                            })(
                                <DatePicker />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="联系地址"
                        >
                            {getFieldDecorator('adress', {
                            })(
                                <TextArea rows="4" placeholder="《新地球》" />
                                )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="头像"
                        >
                            {getFieldDecorator('userImg', {
                            })(
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    showUploadList={false}
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    onChange={this.handleChangeImg}
                                >
                                    {this.state.userImg ? <img src={this.state.userImg} /> : <Icon type="plus" />}
                                </Upload>
                                )}
                        </FormItem>
                        <FormItem
                            {...offsetLayout}
                        >
                            <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}
export default Form.create()(Register)